<template>
  <div>
    <div style="padding-top: 16px;">
      <div class="warpper">
        <t-tabs selected="item3">
          <t-tabs-head>
            <t-tabs-item name="item1">Tab1</t-tabs-item>
            <t-tabs-item name="item2">Tab2</t-tabs-item>
            <t-tabs-item name="item3">Tab3</t-tabs-item>
          </t-tabs-head>
          <t-tabs-body>
            <t-tabs-pane name="item1">
              <h2>Content of Tab Pane 1</h2>
            </t-tabs-pane>
            <t-tabs-pane name="item2">
              <h2>Content of Tab Pane 2</h2>
            </t-tabs-pane>
            <t-tabs-pane name="item3">
              <h2>Content of Tab Pane 3</h2>
            </t-tabs-pane>
          </t-tabs-body>
        </t-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Tabs from "../../../src/components/tabs/tabs";
import TabsBody from "../../../src/components/tabs/tabs-body";
import TabsHead from "../../../src/components/tabs/tabs-head";
import TabsItem from "../../../src/components/tabs/tabs-item";
import TabsPane from "../../../src/components/tabs/tabs-pane";
export default {
  components: {
    "t-tabs": Tabs,
    "t-tabs-head": TabsHead,
    "t-tabs-body": TabsBody,
    "t-tabs-pane": TabsPane,
    "t-tabs-item": TabsItem
  },
  data() {
    return {
      loading: true
    };
  }
};
</script>

<style lang="scss" scoped>
.warpper {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  padding: 20px 20px;
}
</style>